<template>
    <view class="user" style="background-image: url('../../static/images/user/user_bg.png')">
        <view class="header">
            <!-- #ifndef  H5 -->
            <u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent">
                <u-navbar
                    :is-back="false"
                    :title-bold="true"
                    :is-fixed="false"
                    :border-bottom="false"
                    :background="{ background: 'rgba(256,256, 256,' + navBg + ')' }"
                    :title-color="navBg > 0.5 ? '#000' : '#fff'"
                ></u-navbar>
            </u-sticky>
            <!-- #endif -->
            <view class="user-info row-between">
                <view class="info row">
                    <view v-if="isLogin">
                        <image
                            class="avatar mr20 flexnone"
                            :src="
                                userInfo.avatar
                                    ? userInfo.avatar
                                    : '/static/images/user/default_avatar.png'
                            "
                        ></image>
                    </view>
                    <view v-else>
                        <image
                            class="avatar mr20 flexnone"
                            src="/static/images/user/default_avatar.png"
                        />
                    </view>

                    <view class="white mr20" v-if="isLogin">
                        <view class="name xxl line1">{{ userInfo.nickname }}</view>
                    </view>
                    <view class="white" v-else @tap="goLogin">
                        <view style="font-size: 42rpx; color: #ffffff">点击登录</view>
                    </view>
                </view>
                <view class="row" style="align-self: flex-start">
                    <view class="user-opt" @tap="goPage('/pages/user_set/user_set')">
                        <image
                            style="width: 58rpx; height: 58rpx"
                            src="/static/images/icon_edit.png"
                        ></image>
                    </view>
                </view>
            </view>
        </view>
        <view class="order-nav bg-white">
            <view class="title row-between" @tap="goPage('/pages/user_order/user_order')">
                <view class="lg" style="font-size: 28rpx; font-weight: bold">我的订单</view>
                <view class="muted sm row">
                    全部
                    <image class="icon-sm ml10" src="/static/images/arrow_right.png"></image>
                </view>
            </view>
            <view class="nav row">
                <view
                    class="item column-center mb20"
                    @tap="goPage('/pages/user_order/user_order?type=delivery')"
                >
                    <view class="icon-contain">
                        <view v-if="userInfo.wait_take" class="badge xs row-center bg-white">
                            {{ userInfo.wait_take }}
                        </view>
                        <image
                            class="nav-icon"
                            src="/static/images/icon_my_daiwancheng.png"
                        ></image>
                    </view>
                    <view class="sm mt10">待完成</view>
                </view>
                <view
                    class="item column-center mb20"
                    @tap="goPage('/bundle/pages/goods_comment_list/goods_comment_list')"
                >
                    <view class="icon-contain">
                        <view v-if="userInfo.wait_comment" class="badge xs row-center bg-white">
                            {{ userInfo.wait_comment }}
                        </view>
                        <image class="nav-icon" src="/static/images/icon_my_pingjia.png"></image>
                    </view>
                    <view class="sm mt10">已评价</view>
                </view>
                <view
                    class="item column-center mb20"
                    @tap="goPage('/bundle/pages/goods_comment_list/goods_comment_list')"
                >
                    <view class="icon-contain">
                        <view v-if="userInfo.wait_comment" class="badge xs row-center bg-white">
                            {{ userInfo.wait_comment }}
                        </view>
                        <image class="nav-icon" src="/static/images/icon_my_wancheng.png"></image>
                    </view>
                    <view class="sm mt10">已完成</view>
                </view>
            </view>
        </view>
        <view class="my-assets">
            <view class="nav row">
                <view class="assets-item bg-white item_card row-between ml20 mr-2">
                    <view>
                        <image class="icon-md ml20" src="/static/images/icon_money.png"></image>
                        查看佣金
                    </view>

                    <view
                        class="icon-sm mr20"
                        style="display: inline-block; align-items: center"
                        @tap="goPage('/packages/pages/user_wallet/user_wallet')"
                    >
                        <image class="icon-sm" src="/static/images/arrow_right.png"></image>
                    </view>
                </view>
                <view class="assets-item bg-white item_card row-between mr20">
                    <view>
                        <image class="icon-md ml20" src="/static/images/icon_zizhi.png"></image>
                        查看资质
                    </view>

                    <view class="icon-sm mr20" @tap="goPage('/pages/user_set/user_set')">
                        <image class="icon-sm" src="/static/images/arrow_right.png"></image>
                    </view>
                </view>
            </view>
        </view>
        <view class="my-assets my-tel mt20 ml20 mr20">
            <view class="nav row-between">
                <view class="">
                    <image class="icon-md ml20" src="/static/images/icon_tel.png"></image>
                    平台电话
                </view>
                <view class="mr20">{{ mobile }}</view>
            </view>
        </view>
        <view class="my-assets my-setting mt5 ml20 mr20">
            <view class="nav row-between">
                <view>
                    <image class="icon-md ml20" src="/static/images/icon_setting.png"></image>
                    设置
                </view>
                <view class="mr20" @tap="goPage('/pages/user_set/user_set')">
                    <image class="icon-sm" src="/static/images/arrow_right.png"></image>
                </view>
            </view>
        </view>
        <tabbar />
    </view>
</template>

<script setup lang="ts">
import { getDecorate } from '@/api/shop'
import { useUserStore } from '@/stores/user'
import { onShow } from '@dcloudio/uni-app'
import { storeToRefs } from 'pinia'
import { reactive, ref } from 'vue'

const state = reactive<{
    meta: any[]
    pages: any[]
}>({
    meta: [],
    pages: []
})

const mobile = ref('')

const getData = async () => {
    const data = await getDecorate({ id: 2 })
    let kefu_data = await getDecorate({ id: 3 })

    kefu_data = JSON.parse(kefu_data.data)
    mobile.value = kefu_data[0].content.mobile
    state.meta = JSON.parse(data.meta)
    state.pages = JSON.parse(data.data)
    uni.setNavigationBarTitle({
        title: state.meta[0].content.title
    })
}
const userStore = useUserStore()
const { userInfo, isLogin } = storeToRefs(userStore)
onShow(() => {
    userStore.getUser()
})
const goLogin = () => {
    uni.navigateTo({
        url: '/pages/login/login'
    })
}
const goPage = (url: string) => {
    console.log(url)
    uni.navigateTo({
        url: url
    })
}
getData()
</script>

<style lang="scss" scoped>
body {
    background-color: #f8f8f8;
}

.user {
    background-size: 100% 420rpx;
    background-repeat: no-repeat;

    .header {
        display: flex;
        flex-direction: column;
        height: 420rpx;

        .user-info {
            padding: 0rpx 30rpx;
            //#ifdef  H5
            padding-top: 90rpx;
            //#endif
            .avatar {
                height: 110rpx;
                width: 110rpx;
                border-radius: 50%;
                overflow: hidden;
            }

            .name {
                text-align: left;
                margin-bottom: 5rpx;
                max-width: 400rpx;
            }

            .user-id {
                border: 1px solid white;
                border-radius: 100rpx;

                .copy-btn {
                    background-color: #ffdfda;
                    height: 40rpx;
                    width: 90rpx;
                    border-radius: 100rpx;
                }
            }

            .user-opt {
                position: relative;

                .dot {
                    position: absolute;
                    background-color: #ee0a24;
                    border: 2rpx solid #ffffff;
                    border-radius: 100%;
                    top: 6rpx;
                    right: 0rpx;
                    font-size: 22rpx;
                    min-width: 16rpx;
                    height: 16rpx;
                }
            }

            .buyer-type {
                background-color: #ffa200;
                height: 38rpx;
                padding: 0 10rpx;
            }
        }

        .member {
            flex: 1;
            padding: 0 20rpx;

            .member-entery {
                color: #ffe0a1;
                padding: 0 16rpx;
                width: 100%;
                height: 80rpx;
                background: url(../../static/images/bg_member_grade.png);
                background-size: 100%;
            }
        }
    }

    .order-nav {
        .icon-contain {
            position: relative;
        }
    }

    .order-nav {
        margin: -120rpx 20rpx 0;
        border-radius: 8rpx;
    }

    .my-assets {
        border-radius: 8rpx;
    }

    .server-nav {
        margin: 20rpx;
        border-radius: 8rpx;
    }

    .title {
        height: 88rpx;
        padding: 0 30rpx;
    }

    .nav {
        padding: 26rpx 0 0;

        .assets-item {
            flex: 1;
            border-radius: 8rpx;
        }

        .item {
            width: 33%;
        }

        .badge {
            padding: 0 6rpx;
            min-width: 28rpx;
            height: 28rpx;
            border-radius: 28rpx;
            box-sizing: border-box;
            border: 1rpx solid;
            position: absolute;
            left: 33rpx;
            top: -10rpx;
            z-index: 2;
        }

        .nav-icon {
            width: 52rpx;
            height: 52rpx;
        }

        .item_card {
            height: 120rpx;
        }
    }

    .my-tel,
    .my-setting {
        height: 100rpx;
        background-color: #ffffff;
    }
}
</style>
